import React, {useEffect, useState} from 'react'
import Header from '../components/Header'
import MainNav from '../components/MainNav'
import Footer from '../components/Footer'
import {reqSong, reqTopList, reqTopList2} from '../api/api'
import {useNavigate} from 'react-router-dom'


export default function () {
    const navigate = useNavigate()
    const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`
    const [TopList, setTopList] = useState([])
    const [TOP, setTOP] = useState([])
    const [TopList1, setTopList1] = useState([])
    const [TOP1, setTOP1] = useState([])
    const GoGoGO = async (item) => {
        console.log(item)
        let result = await reqSong(item.id)
        let url = result.data.data[0].url
        console.log(url)
        const play =
            {
                title: item.name,
                artist: item.ar[0].name,
                audioSrc: url,
                image: item.al.picUrl,
                color: randomHex(),
            }
        localStorage.setItem('MUSIC',JSON.stringify(play))
        navigate('/musicpiay', {state: {play}})
    }
    const GoGoR = async (item) => {
        console.log(item)
        let result = await reqSong(item.id)
        let url = result.data.data[0].url
        console.log(url)
        const play =
            {
                title: item.name,
                artist: item.ar[0].name,
                audioSrc: url,
                image: item.al.picUrl,
                color: randomHex(),
            }
        localStorage.setItem('MUSIC',JSON.stringify(play))
        navigate('/musicpiay', {state: {play}})
    }
    useEffect(() => {
        const getTop = async () => {
            let res = await reqTopList2()
            console.log(res)
            const TopList1 = res.data.playlist.tracks.splice(0,20)
            console.log(TopList1)
            setTopList1(TopList1)
            setTOP1(res.data)
        }

        getTop()
    }, [])
    useEffect(() => {
        const getTop = async () => {
            let res = await reqTopList()
            console.log(res)
            const TopList = res.data.playlist.tracks.splice(0,20)
            console.log(TopList)
            setTopList(TopList)
            setTOP(res.data)
        }

        getTop()
    }, [])
    const playlist = TOP?.playlist
    const playlist1 = TOP1?.playlist
    return (
        <div>
            <Header></Header>
            <MainNav></MainNav>
            <div className="m-l-bottom">
                <div className="b-content">
                    <div className="bc">
                        <div className="bc-top">
                            <img src='./img/LISA.webp' alt={playlist?.name}/>
                        </div>
                        <dd>
                            <ol>
                                {
                                    TopList.map((item, index) => (<li key={item.id} onClick={() => GoGoGO(item)}>
                                        <span className="no no-top">{index}</span>
                                        <a>{item.name}</a>
                                    </li>))
                                }

                            </ol>
                            <div className="b-more">
                            </div>
                        </dd>
                    </div>
                    <div className="bc">
                        <div className="bc-top">
                            <img src='./img/LISA1.webp' alt={playlist?.name}/>
                        </div>
                        <dd>
                            <ol>
                                {
                                    TopList1.map((item, index) => (<li key={item.id} onClick={() => GoGoR(item)}>
                                        <span className="no no-top">{index}</span>
                                        <a>{item.name}</a>
                                    </li>))
                                }

                            </ol>
                            <div className="b-more">
                            </div>
                        </dd>
                    </div>
                </div>
            </div>
            <Footer></Footer>
        </div>
    )
}

